<template>
		<checkbox-group  @change="checkboxChange">
			<view style="display:flex;width:690rpx;height:200rpx;align-items: center;margin:30rpx auto;border:2rpx solid #ccc;border-radius:30rpx;" v-for="(item,i) in cartData" :key="i">
				<checkbox value="i" :checked="item.selected" @click="checkclick(item.sId)"/>
				<!-- {{item}} -->
				<view class="item">
					<view class="left">
						<image :src="item.img" style="width:100rpx;" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="title">
							{{item.gName}} {{item.sName}}
						</view>
						<view class="bottom">
							<text style="color:red;">{{item.price}}</text>	<view style="height:30rpx;">
						<uni-number-box v-model="item.goodsNum"></uni-number-box>
					</view>
						</view>
					</view>
				</view>
			</view>
		</checkbox-group>
		<view class="pagebottom">
			<radio-group @change="radioChange" @click="radioChange">
				<view style="display: flex;align-items: center;">
					<radio value="item.value" :checked="allSelectType"/>全选
				</view>
			</radio-group>
			<view class="toPay" @click="toPay">
				去购买
			</view>
		</view>
</template>

<script setup>
	import {ref} from 'vue'
	import http from '../components/http.js'
	import { UUID } from "uuidjs";
	const cartData = ref([])
	const allSelectType = ref(true)
	function query(){
		http.http({url:'/cart/query',method:'GET'}).then(res=>{
			cartData.value = res.data.data
			res.data.data.forEach(item=>{
				if(!item.selected){
					allSelectType.value = false
				}
			})
		})
	}
	query()
	function radioChange(e){
		console.log(e)
		allSelectType.value = !allSelectType.value
		console.log(allSelectType.value)
		if(allSelectType.value){
			cartData.value.forEach(item=>{
				item.selected = true
			})
		}else{
			cartData.value.forEach(item=>{
				item.selected = false
			})
			console.log(cartData.value)
		}
		// console.log(cartData.value)
		
	}
	function toPay(){
		if(!allSelectType.value){
			uni.showToast({
				title:'请选择商品',
				icon:'none'
			})
		}else{
		http.http({url:'/cart/query',method:'GET'}).then(res=>{
			let xzsz = res.data.data.map(item=>{
				if(item.selected){
					return item
				}else{
					
				}
			})
			console.log(xzsz.filter(Boolean),'xzsz')
			const uuid = UUID.generate();
			http.http({url:'/order/add',method:'POST',data:{uuid:uuid,status:0,xzsz:JSON.stringify(xzsz.filter(Boolean)),userId:1}}).then(res=>{
				query()
			})
		})
		}
	}
	function checkboxChange(e){
		console.log(e,e.detail.value.length,cartData.value.length)
		if(e.detail.value.length!=cartData.value.length){
			allSelectType.value = false
		}else{
			allSelectType.value = true
		}
		
	}
	function checkclick(id){
		console.log(id)
		http.http({url:'/cart/updateSelected',method:'POST',data:{id:id}}).then(res=>{
			
		})
		
	}
</script>

<style scoped>
	.item{
		display:flex;
	}
	.pagebottom{
		position:fixed;
		bottom:100rpx;
		left:30rpx;
		display:flex;
		justify-content:space-between;
		align-items: center;
		width:690rpx;
		height:100rpx;
		margin:0 auto;
	}
	.toPay{
		width:200rpx;
		height:60rpx;
		line-height:60rpx;
		text-align: center;
		border-radius:30rpx;
		background:red;
		color:#fff;
	}
	.bottom{
		width: 500rpx;
		display:flex;
		justify-content:space-between;
	}
</style>